<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
//示例--复制选中的水果
$(function(){
	$("#u1 li").live("click",function(){
		var $li = $(this).clone();
		$("#u1").append($li);
	});
	//添加按钮的处理
	var $msg = $("<span>不能为空</span>");
	$("#ctx").after($msg);//将span加入到文本框之后
	$msg.hide();//先将span隐藏
	//添加按钮的处理
	$("#btn1").click(function(){
		var v = $("#ctx").val();
		//判断是否为空，如果为空显示提示信息
		if(v == ""){
		    $msg.show();//将span显示
		     return;
		}
		//将文本框的值拼成li元素,并添加到ul中
		var $v = $("<li>"+v+"</li>");
		$("#u1").append($v);
	});
	//当用户开始输入时，清空msg消息
	$("#ctx").keyup(function(){
		$msg.hide();//将span隐藏
	});
})
</script>
</head>
<body>
<h1>文档处理函数示例-1</h1>
<input type="text" id="ctx"/>
<input type="button" value="添加" id="btn1">
<br>
<ul id="u1">
	<li>苹果</li>
	<li>香蕉</li>
	<li>水蜜桃</li>
</ul>
</body>
</html>